<template>
   <nav class="header-nav">
      <div class="content-nav">
         <div class="log">
            <router-link to="/"></router-link>
         </div>
         <div class="right">
            <div class="flex">
               <template v-if="hiddenNav">
                  <div id="event">
                     <ul class="nav-right">
                        <li v-for="(item,i) of nav"
                            :key="item.id"
                            @mouseenter="mouseenter(i,item.dataNmae)"
                        >
                           <router-link :data-index="i" to="">
                              {{item.item}}
                           </router-link>
                        </li>
                     </ul>
                     <div>
                        <div class="mouser-header-sub"
                             :class="{'active-height':indexSubscript === liIndex}"
                             ref="subHeight"
                        >
                           <div class="sub-body-content" v-if="dataUrl.length">
                              <ul ref="sub">
                                 <li v-for="(item,index) in dataUrl"
                                     :key="index"
                                     :data-index="index"
                                     @mouseenter="_hoverMouseenter(index)"
                                     @mouseleave="_hoverMouseleave(index)"
                                 >
                                    <router-link class="item-click" to="/">
                                       <img v-lazy='item.imgUrl'/>
                                       <p style="font-size: 12px">{{item.name}}</p>
                                       <p>{{item.price}}</p>
                                    </router-link>
                                 </li>
                              </ul>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div>
                     <el-input v-model="input" placeholder="请输入内容"></el-input>
                  </div>
                  <div class="btn">
                     <el-button :round='round' type="primary">搜索</el-button>
                  </div>
               </template>

               <div class="login">
                  <el-dropdown v-if="!loginMessage.success">
                    <span class="el-dropdown-link">
                       <i class="iconfont icon-denglu"></i>
                    </span>
                     <el-dropdown-menu slot="dropdown">
                        <router-link to="/login">
                           <el-dropdown-item>立即登录</el-dropdown-item>
                        </router-link>
                        <router-link to="/register">
                           <el-dropdown-item>立即注册</el-dropdown-item>
                        </router-link>
                     </el-dropdown-menu>
                  </el-dropdown>
                  <div class="loginHeader" v-else>
                     <div class="headerImage" ref="headerImage" v-if="hiddenHeadPortrait">
                        <router-link to="/loginDetails">
                           <img :src="loginMessage.user.Headimagelink" alt="">
                        </router-link>
                     </div>
                     <div v-else>
                        用户 {{userName}}
                     </div>
                     <span>|</span>
                     <div @click="_loginOut">
                        <router-link to="">
                           退出
                        </router-link>
                     </div>
                  </div>
               </div>
               <div class="Shopping-Cart">
                  <i class="iconfont icon-iconset0308"></i>
               </div>
            </div>
         </div>
      </div>
   </nav>
</template>

<script>
   import mouserHeaderSub from '../../components/mouseover-header-sub/mouser-header-sub'
   import {lists, clearCookies} from '../../assets/util/util'
   import {mapGetters, mapMutations} from 'vuex'

   export default {
      name: 'headerNnav',
      data() {
         return {
            nav: [
               {
                  id: 1,
                  item: '魅族手机',
                  dataNmae: 'hd603'
               },
               {
                  id: 2,
                  item: '魅蓝手机',
                  dataNmae: 'hd604'
               },
               {
                  id: 3,
                  item: '魅族声学',
                  dataNmae: 'hd605'
               },
               {
                  id: 4,
                  item: '智能·配件',
                  dataNmae: 'hd606'
               },
               {
                  id: 5,
                  item: '生活周边',
                  dataNmae: 'hd607'
               }
            ],
            input: '',
            round: false,
            CartNum: 0,
            indexSubscript: '',
            liIndex: null,
            index: null,
            isboolean: true,
            dataUrl: []
         }
      },
      props: {
         userName: {
            type: String,
            default() {
               return ''
            }
         },
         hiddenNav: {
            type: Boolean,
            default() {
               return true
            }
         },
         hiddenHeadPortrait: {
            type: Boolean,
            default() {
               return true
            }
         }
      },
      computed: {
         ...mapGetters([
            'NavigationBarData',
            'loginMessage',
            'beforeRouter'
         ])
      },
      mounted() {
         this.eventMouseover()
         this.eventMouseout()
      },
      methods: {
         _hoverMouseenter(index) {

         },
         _hoverMouseleave(index) {
            // console.log(index)
         },
         seover(event) {
            if (this.indexSubscript === this.liIndex) {
               setTimeout(() => {
                  this.elemt()
               }, 20)
               return
            }
            if (this.isboolean) {
               this.elemt()
            }
            this.styleElement()
            lists.removeClass(this.$refs.subHeight, 'hidden')
            let el = event.target
            let index = Number(lists.customAttribute(el, 'index'))
            this.indexSubscript = index
         },
         mouseout() {
            this.liIndex = null
            this.styleElement()
            lists.addClass(this.$refs.subHeight, 'hidden')
         },
         mouseenter(index, dataName) {
            this.liIndex = index
            this._getData(dataName)
         },
         elemt() {
            if (!this.dataUrl.length) {
               return
            }
            this.$nextTick(() => {
               this.element = this.$refs.sub.children
               Array.from(this.element).forEach((item, index) => {
                  item.style.cssText = `
                  transition:all 500ms ease-in 600ms;
                  transition-delay:${index * 100}ms;
                  margin-left:0px;
                  opacity: 1;
               `
               })
            })

         },
         styleElement() {
            if (this.element) {
               Array.from(this.element).forEach((item, index) => {
                  item.style.cssText = ''
               })
            }
         },
         eventMouseover() {
            let lesf = this
            if (!document.getElementById('event')) {
               return
            }
            this.elemEvent = document.getElementById('event')
            this.elemEvent.addEventListener('mousemove', function (e) {
               if (e.target.nodeName === 'A') {
                  lesf.seover(e)
               }
            }, true)
         },
         eventMouseout() {
            if (!this.elemEvent) {
               return
            }
            this.elemEvent.addEventListener('mouseleave', (e) => {
               this.mouseout()
            }, false)
         },
         async _getData(dataName) {
            if (this.getNavigationBarData()({objName: dataName})) {
               this.dataUrl = this.getNavigationBarData()({objName: dataName})
               return
            }
            let data = await this.$axios.get('/apis/home/sitenavbd', {
               params: [
                  {'dataUrl.namenav': dataName},
                  {'dataUrl': {$elemMatch: {'namenav': dataName}}, 'name': true, '_id': false}
               ]
            })
            this.dataUrl = data.data.result[0].dataUrl[0][dataName]
            // console.log(this.dataUrl.hd603)
            this.setNavigationBarData({objName: dataName, data: data.data.result[0].dataUrl[0][dataName]})
            this.getNavigationBarData()({objName: dataName})
         },
         async _loginOut() {
            let data = await this.$axios.get('/apis/login/loginOut')
            clearCookies('SESSION')
            clearCookies('SESSION.sig')
            this.setloginMessage('')
            sessionStorage.removeItem('user_id')
            if (this.$route.path === '/loginDetails') {
               this.$router.push({
                  path: this.beforeRouter
               })
            }
         },
         ...mapMutations({
            setNavigationBarData: 'NAVIGATION_BAR_DATA',
            setloginMessage: 'loginMessage'
         }),
         ...mapGetters({
            getNavigationBarData: 'NavigationBarData'
         })
      },
      components: {
         mouserHeaderSub
      },
      watch: {
         NavigationBarData: {
            handler(newVal, oldVal) {
               console.log(newVal)
            }
         },
         loginMessage: {
            handler(newVal) {
               // console.log(newVal)
               // this.$nextTick(() => {
               //    if (newVal.success) {
               //       this.$refs.headerImage.style.cssText = `
               //       background: url(${newVal.user.Headimagelink}) no-repeat;
               //    `
               //    }
               // })
            }
         }
      }
   }
</script>

<style scoped lang="stylus">
   @import '../../assets/stylus/common.styl'
   .header-nav
      position relative
      background #fff
      width 100%

      .content-nav
         width 1240px
         height 82px
         margin 0 auto

   .log
      height 100%
      width 140px
      display flex
      align-items center
      float left

      a
         width 140px
         height 25px
         display inline-block
         background url('http://www3.res.meizu.com/static/cn/_partial/header/images/logo-new_2ea694e.png') no-repeat;

   .right
      float right

   .flex
      display flex
      align-items center
      height 82px

   .nav-right
      width 530px
      height 82px
      display flex
      align-items center

      li a
         display: block
         line-height: 82px
         text-align: center
         width: 105px
         height: 82px
         font-size 16px
         color #515151
         &:hover
            color blue

   .el-icon-picture, .el-icon-goods
      font-size 35px

   .login
      margin: 0 15px

   .none
      display none

   .dasd
      color red

   .mouser-header-sub
      background #fff
      position absolute
      z-index 99
      top 82px
      left 0
      width 100%
      overflow hidden
      height 0px
      transition all 560ms cubic-bezier(0.15, 1.18, 0.69, 1.00)

   .active-height
      min-height 160px

   .sub-body-content
      widthContent()
      margin-left 160px
      box-sizing border-box
      padding-top 5px
      ul
         widthContent()
         align-items center
         display flex
         position relative
         li
            /*background blue*/
            margin-left 30px
            width 139px
            height 140px
            opacity 0
            a
               opacity 0.7
      li a:hover
         opacity 1
         color aqua
      .item-click
         width 100%
         height 100%
         display block
         text-align center
         img
            width 100px
            height 100px

   .active-transition
      opacity 1

   .hidden
      height 0
      overflow hidden

   .elemt-opacity
      opacity 0.7

   p
      font-size 14px

   .login, .Shopping-Cart
      i
         font-size 40px

   .loginHeader
      display flex
      align-items center
      div
         margin 0 10px
      span
         color #cbcbcb

   .headerImage
      height 30px
      width 30px
      img
         text-align center
         border-radius 50%
         width 30px
         height 30px
</style>
